<template>
    <div class="login">
        <div class="login-card">
            <div class="login-card-title">奇瑞自动化测试平台</div>
            <div class="login-card-content">
                <el-form ref="loginFormDom" :model="state.loginForm" :rules="state.loginRules"
                         @keyup.enter="state.handleLogin">
                    <el-form-item prop="staffNo" style="margin-bottom: 30px">
                        <el-input v-model="state.loginForm.staffNo" placeholder="用户名" type="text" tabindex="1"
                                  size="large">
                            <template #suffix>
                                <SvgIcon name="usefilled"/>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            v-model="state.loginForm.password"
                            placeholder="密码"
                            type="password"
                            tabindex="2"
                            size="large"
                            show-password
                        />
                    </el-form-item>
                    <el-button :loading="state.loading" type="primary" size="large" @click.prevent="state.handleLogin">
                        登 录
                    </el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import {reactive, ref} from 'vue';
    import {ElMessage} from 'element-plus';
    import type {FormInstance} from 'element-plus';
    import {useRouter} from 'vue-router';
    import usePermission from '@/store/usePermission';

    const permission = usePermission();
    const router = useRouter();

    interface ILoginForm {
        /** admin 或 editor */
        staffNo: string;
        /** 密码 */
        password: string;
    }

    const loginFormDom = ref<FormInstance>();
    const state = reactive({
        /** 登录按钮 loading */
        loading: false,
        /** 登录表单 */
        loginForm: {
            staffNo: '',
            password: '',
        } as ILoginForm,
        /** 登录表单校验规则 */
        loginRules: {
            staffNo: [{required: true, message: '请输入用户名', trigger: 'blur'}],
            password: [
                {required: true, message: '请输入密码', trigger: 'blur'},
                {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'},
            ],
        },
        /** 登录逻辑 */
        handleLogin: async () => {
            if (!loginFormDom.value) return;
            await loginFormDom.value.validate(async (valid) => {
                try {
                    if (valid) {
                        await permission.handleLogin(state.loginForm);
                        ElMessage.success('登录成功！');
                        router.push({path: '/'});
                    }
                } catch (error) {
                    console.error(error);
                }
            });
        },
    });
</script>

<style lang="scss" scoped>
    .login {
        position: relative;
        width: 100%;
        min-height: 100%;
        background: url('login-bg.jpg') no-repeat;
        background-position: center;
        background-size: cover;

        &-card {
            position: absolute;
            right: 8%;
            top: 50%;
            transform: translate(0%, -80%);
            width: 400px;
            box-shadow: 0 0 10px #dcdfe6;
            background-color: $common-color;
            overflow: hidden;
            height: 350px;

            &-title {
                margin-top: 30px;
                line-height: 50px;
                text-align: center;
                font-size: 24px;
            }

            &-content {
                padding: 20px 50px 50px 50px;

                .el-button {
                    width: 100%;
                    margin-top: 10px;
                }
            }
        }
    }
</style>
